<template>
  <a-card :bordered="false" class="proCard">
    <BasicTable
      leftTitle="表格列表"
      leftTitleTooltip="这是一个提示"
      :columns="columns"
      :request="loadDataTable"
      row-key="id"
      ref="actionRef"
      :actionColumn="actionColumn"
    >
      <template #toolbar>
        <a-button type="primary" @click="reloadTable">刷新数据</a-button>
      </template>
    </BasicTable>
  </a-card>
</template>

<script lang="ts" setup>
  import { reactive, ref, h } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { getTableList } from '@/api/table/list';
  import { columns } from './basicColumns';
  import { Message } from '@arco-design/web-vue';
  import { DeleteOutlined, FormOutlined } from '@vicons/antd';
  import { renderIcon } from '@/utils';

  const actionRef = ref();

  const params = reactive({
    pageSize: 5,
    name: 'xiaoMa',
  });

  const actionColumn = reactive({
    width: 160,
    title: '操作',
    key: 'action',
    fixed: 'right',
    align: 'center',
    render({ record }) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '删除',
            type: 'primary',
            status: 'danger',
            icon: renderIcon(DeleteOutlined),
            popConfirm: {
              content: '您真的，确定要删除吗？',
              okText: '确定',
              cancelText: '取消',
              onOk: handleDelete.bind(null, record),
            },
          },
          {
            label: '编辑',
            type: 'primary',
            icon: renderIcon(FormOutlined),
            onClick: handleEdit.bind(null, record),
          },
        ],
      });
    },
  });

  const loadDataTable = async (res) => {
    return await getTableList({ ...params, ...res });
  };

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleDelete(record) {
    console.log(record);
    Message.success('删除成功');
  }

  function handleEdit(record) {
    console.log(record);
    Message.success('您点击了编辑按钮');
  }
</script>

<style lang="less" scoped></style>
